<template>
  <el-form
    :model="form"
    label-width="auto"
    label-position="left"
    :rules="rules"
    ref="formRef"
    style="padding: 20px; max-width: 1000px"
  >
    <el-row>
      <el-col :span="12">
        <el-form-item label="合同编号" prop="contractNo">
          <el-select
            style="width: 200px"
            v-model="form.contractNo"
            filterable
            placeholder="请选择"
            @change="selectContract"
            :disabled="form.id"
          >
            <el-option
              v-for="item in contractList"
              :key="item.id"
              :value="item.contractNo"
              :label="item.contractNo"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="成交日期">
          <el-input
            v-model="form.transactionDate"
            readonly
            placeholder="成交日期"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="房屋位置">
      <el-input
        v-model="form.location"
        readonly
        placeholder="房屋位置"
      ></el-input>
    </el-form-item>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="卖方">
          <el-input
            v-model="form.seller"
            readonly
            placeholder="卖方"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="中介费">
          <el-input
            v-model="form.sellerCommission"
            readonly
            placeholder=""
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="买方">
          <el-input v-model="form.buyer" readonly placeholder="买方"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="中介费">
          <el-input
            v-model="form.buyerCommission"
            readonly
            placeholder=""
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="应收金额（小写）">
          <el-input
            v-model="form.receivableAmount"
            placeholder="应收金额（小写）"
            readonly
          >
            <template #append>元</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="应收金额（大写）">
          <el-input
            v-model="form.receivableAmountInWords"
            placeholder="应收金额（大写）"
            readonly
          >
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="已收金额（小写）">
          <el-input
            v-model="form.receivedAmount"
            placeholder="已收金额（小写）"
            readonly
          >
            <template #append>元</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="已收金额（大写）">
          <el-input
            v-model="form.receivedAmountInWords"
            placeholder="已收金额（大写）"
            readonly
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="退款金额（小写）" prop="refundAmount">
          <el-input
            v-model="form.refundAmount"
            placeholder="请输入退款金额"
            @blur="getDxMoney(form.refundAmount)"
          >
            <template #append>元</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="退款金额（大写）">
          <el-input
            v-model="form.refundAmountInWords"
            readonly
            placeholder="退款金额（大写）"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 第九行：退款日期 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="退款日期" prop="refundDate">
          <el-date-picker
            v-model="form.refundDate"
            type="date"
            placeholder="选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 备注 -->
    <el-form-item label="备注">
      <el-input type="textarea" v-model="form.notes" rows="2" />
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref, defineProps, onMounted } from "vue";
import {
  listContract,
  listRefundItem,
  refundOrder,
  getCalLetter,
} from "@/api/business/refund";
const props = defineProps({
  fData: {
    type: Object,
    required: true,
  },
});
const form = reactive({ ...props.fData });
const contractList = ref([]);
const refundCategoriesNum = ref([]);
function getAllContractList() {
  listContract().then((res) => {
    contractList.value = res.data;
  });
}
getAllContractList();
//获取退款大写金额
function getDxMoney(value) {
  getCalLetter({ amount: value }).then((res) => {
    form.refundAmountInWords = res.msg;
  });
}

//选择合同编号获取当前合同编号中的信息存到curentContract中
const currentContract = ref({});
function selectContract(value) {
  currentContract.value = contractList.value.find(
    (v) => v.contractNo === value
  );
  reset();
  form.contractNo = value;
}
onMounted(() => {
  if (form.id) {
    currentContract.value.id = form.contractId;
  }
});
function reset() {
  Object.assign(form, {
    contractNo: "",
    refundType: "",
    refundPayerType: "",
    refundUserPriceType: "",
    customerName: "",
    customerPhone: "",
    receiptAccount: "",
    refundPriceType: "",
    refundCategories: [],
    refundMethod: "",
    refundAccount: "",
    receivableAmount: "",
    receivableAmountInWords: "",
    receivedAmount: "",
    receivedAmountInWords: "",
    refundAmount: "",
    refundAmountInWords: "",
    refundDate: "",
    notes: "",
  });
}
//监听退款账户是买方还是卖方,2买方，1卖方
function selectRefundPayerType(value) {
  getRefundItemList(value);
  form.refundCategories = [];
  refundCategoriesNum.value = [];
  if (value == 2) {
    form.customerName = currentContract.value.customerName;
    form.customerPhone = currentContract.value.customerPhone;
  } else if (value == 1) {
    form.customerName = currentContract.value.ownerName;
    form.customerPhone = currentContract.value.ownerPhone;
  }
}

const refundItemList = ref([]);
//获取退款项目列表
function getRefundItemList(type) {
  listRefundItem({ type }).then((res) => {
    refundItemList.value = res.data;
  });
}
getRefundItemList(form.refundType);
//监听退款项目
function selectRefundCategories(value) {
  refundCategoriesNum.value = value.map((v) => {
    return { itemId: v, contractId: currentContract.value.id };
  });
  refundOrder({ items: refundCategoriesNum.value }).then((res) => {
    //应收
    form.receivableAmount = res.data.allAmount;
    form.receivableAmountInWords = res.data.allAmountWords;
    //已收
    form.receivedAmount = res.data.payAmount;
    form.receivedAmountInWords = res.data.payAmountWords;
  });
}
const rules = {
  contractNo: [
    { required: true, message: "请选择合同编号", trigger: "change" },
  ],
  refundType: [
    { required: true, message: "请选择退款类别", trigger: "change" },
  ],
  refundPayerType: [
    { required: true, message: "请选择退款账户", trigger: "change" },
  ],
  refundUserPriceType: [
    { required: true, message: "请选择退款方式", trigger: "change" },
  ],
  //退款金额分类
  refundPriceType: [
    { required: true, message: "请选择退款金额分类", trigger: "change" },
  ],
  refundCategories: [
    { required: true, message: "请选择退款项目", trigger: "change" },
  ],
  //退款方式
  refundMethod: [
    { required: true, message: "请选择退款方式", trigger: "change" },
  ],
  //退款对象
  refundAccount: [
    { required: true, message: "请选择退款对象", trigger: "change" },
  ],
  refundAmount: [
    { required: true, message: "请输入退款金额", trigger: "blur" },
  ],
  refundDate: [
    { required: true, message: "请选择退款日期", trigger: "change" },
  ],
};
const formRef = ref();

function validateForm() {
  return formRef.value.validate();
}

defineExpose({
  validateForm,
  form,
});
</script>

<style scoped>
.mb-3 {
  margin-bottom: 16px;
}
</style>
